<template>
  <div>
    <!-- 1.完整写法： v-on:监听的事件="methods中的方法" -->
    <button v-on:click="btn1Click">监听按钮单击(完整写法)</button>
    <div class="area" v-on:mousemove="mouseMove">监听鼠标移动事件</div>

    <!-- 2.语法糖 -->
    <button @click="btn1Click">监听按钮单击(简写)</button>
    <!-- 3.绑定一个表达式： inline statement
     -->
    <button @click="counter++">单击+1： {{ counter }}</button>

    <!-- 4.绑定一个对象 -->

    <div class="area" v-on="{ click: btn1Click, mousemove: mouseMove }">
      监听鼠标移动事件
    </div>
  </div>
</template>

<script>
export default {
  name: 'vonbase',
  data() {
    return {
      counter: 100
    }
  },
  methods: {
    btn1Click() {
      console.log('按钮1发生了单击')
    },
    mouseMove() {
      console.log('鼠标移动')
    }
  }
}
</script>

<style lang="scss" scoped></style>
